<template>
	<div class="strust-detailed">
		<div class="strust-detailed-warpper" v-if="detailedData.length">
			<div class="strust-detailed-menu">
				<Menu 
					class="menu-content" 
					:active-name="0" 
					@on-select="menuChange">
	               	<MenuItem v-for="(item, index) in detailedData" :name="index">{{item.keyName}}</MenuItem>
	            </Menu>
			</div>
			<div class="strust-detailed-content">
				<Row class="strust-detailed-row">
					<Col 
						class="strust-detailed-col"
						:xs="24" :sm="12" :md="8" :lg="6" 
						v-for="item in detailedData[activeIndex].val">
						<Card class="strust-detailed-card" :padding="0">
							<div class="card-warpper">
						        <header class="card-header">
					           		<span class="title">接口名字</span>
					           		<span class="content">{{item.attributes.apiName}}</span>
					           </header>
					           <div class="card-content">
					           		<div class="card-detail">
					           			<div class="title">请求类型：</div>
					           			<div class="content">Post/Get</div>
					           		</div>
					           		<div class="card-detail">
					           			<div class="title">返回类型：</div>
					           			<div class="content">Json</div>
					           		</div>
					           		<div class="card-detail">
					           			<div class="title">创建时间：</div>
					           			<div class="content">{{filterTime(item.attributes.createDate)}}</div>
					           		</div>
					           		<div class="card-detail">
					           			<div class="title">接口状态：</div>
					           			<div class="content">{{filterStatus(item.attributes.status)}}</div>
					           		</div>
					           		<div class="card-detail">
					           			<div class="card-detail-button" @click="detailedDetail(item)">
					           				<Button type="primary" size="small" long>详情</Button>					           				
					           			</div>
					           		</div>
					           </div>
							</div>
					    </Card>
					</Col>
				</Row>
			</div>
		</div>
		
		<info-modal
			class="strust-detailed-modal"
			ref="detail-modal"
			:title="detailedTitle">
			<div class="strust-detailed-form">
				<Form 
					ref="form" 
					:model="formItem" 
					:label-width="80">
					<Row>
						<Col span="12">
							<FormItem label="接口名称" prop="apiName">
					            <Input :value="formItem.apiName" :readonly="true" class="action-Input"></Input>
					        </FormItem>
						</Col>
						<Col span="12">
							<FormItem label="所属系统" prop="appNamesList">
								<Input :value="filterSystem(formItem.appNamesList)" :readonly="true" class="action-Input"></Input>
					        </FormItem>
						</Col>
					</Row>
					<Row>
						<Col span="12">
							<FormItem label="接口Action" prop="apiAction">
					            <Input :value="formItem.apiAction" :readonly="true" class="action-Input"></Input>
					        </FormItem>
						</Col>
						<Col span="12">
							<FormItem label="状态" prop="status">
								<Input :value="filterStatus(formItem.status)" :readonly="true" class="action-Input"></Input>
					        </FormItem>
						</Col>
					</Row>
			        <FormItem label="接口路径" prop="apiUrl">
			            <Input :value="formItem.apiUrl" :readonly="true"></Input>
			        </FormItem>
			        <FormItem label="接口参数" prop="apiParams">
			            <Input type="textarea" :value="formItem.apiParams" :readonly="true"></Input>
			        </FormItem>
			        <FormItem label="接口返回" prop="apiResult">
			            <Input type="textarea" :value="formItem.apiResult" :readonly="true"></Input>
			        </FormItem>
			        <FormItem label="备注" prop="remark">
			            <Input type="textarea" :value="formItem.remark" :readonly="true"></Input>
			        </FormItem>
				</Form>
			</div>
		</info-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoModalMixin } from 'common/js/mixins';
	import { timeFilter } from 'common/js/util';
	import { errorNotice } from 'common/js/dom';
	import { getStrustDetailed } from 'api/Main';
	
	export default {
		mixins: [loadingMixin, infoModalMixin],
		created() {
			this._getStrustDetailed();
		},
		data() {
			return {
				formItem: {},
				activeIndex: 0,
				detailedData: [],
				detailedTitle: '',
				showLoading: false
			}
		},
		methods: {
			detailedDetail(item) {
				this.detailedTitle = item.attributes.apiName;
				this.$refs['detail-modal'].showModal();
				this.formItem = item.attributes;
			},
			menuChange(name) {
				this.activeIndex = name;
			},
			filterSystem(arr) {
				if (arr && arr.length) {
					return arr.join('、');					
				}else {
					return '';
				}
			},
			filterTime(time) {
				return timeFilter(new Date(time), 'yyyy-MM-dd HH:mm:ss');
			},
			filterStatus(status) {
				return status === 1 ? '启用' : '未启用';
			},
			filterData(data) {
				let arr = [];
				
				for (let key in data) {
					arr.push({
						keyName: key,
						val: data[key]
					})
				}
				
				return arr
			},
			_getStrustDetailed() {
				this.showLoading = true;
				getStrustDetailed()
					.then(res => {
						this.detailedData = this.filterData(res);
						this.showLoading = false;
					})
					.catch(res => {
						errorNotice(res.message);
						this.showLoading = false;
					})
			}
		}
	}
</script>

<style lang="scss">
	@import '~common/scss/color';
	
	.strust-detailed {
		width: 100%;
		height: 100%;
		.strust-detailed-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			.strust-detailed-menu {
				width: 200px;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				.menu-content {
					width: 100% !important;
					min-height: 100%;
					&.ivu-menu-vertical .ivu-menu-item,
					&.ivu-menu-vertical .ivu-menu-submenu-title {
						padding: 8px 16px;
					}
				}
			}
			.strust-detailed-content {
				position: absolute;
				left: 200px;
				right: 0;
				top: 0;
				bottom: 0;
				.strust-detailed-row {
					.strust-detailed-col {
						padding: 5px;
						.strust-detailed-card {
							.card-warpper {
								width: 100%;
								padding: 0 5px;
								.card-header {
									height: 25px;
									line-height: 25px;
									border-bottom: 1px solid lightgray;
									.title {
										padding-right: 5px;
										border-right: 1px solid lightgray;
									}
									.content {
										color: $color-danger;
									}
								}
								.card-content {
									width: 100%;
									height: 175px;
									.card-detail {
										display: flex;
										margin: 10px 0;
										.title, .content {
											flex: 1;
										}
										.title {
											text-align: right;
										}
										.content {
											color: rgb(0, 0, 255);
										}
										.card-detail-button {
											width: 150px;
											margin: 0 auto;
										}
									}
								}
							}
						}
					}					
				}
			}
		}
	}
		
	.strust-detailed-modal {
		.ivu-modal {
			width: 700px;			
		}
		.strust-detailed-form {
			width: 550px;
			margin: 0 auto;
		}
	}
</style>